react技术栈升级的过程

第一阶段：

---

react15+react-router2+redux3+webpack1 升级到 react16+react-router3+redux4+webpack4

---

1.react15升级到16 遇到的坑：
在react16中去除contextTypes ，导致this.context.router.push('/*') 需要替换成
this.props.router.push('/*') 。
2.webpack1升级到4遇到的坑：
（1）webpack4 中建议使用min-css-extract-plugin 分离css，sass等文件，取代插件extract-text-webpack-plugin 效率更高
（2）html-webpack-plugin 要升级到2.22.0及以上
（3）webpack4将webpack.optimize.CommonsChunkPlugin移除，使用和entry平级的optimization里的属性splitChunks来把提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html文件中没有，前提必须是mode=prodution 才生效。
（4）webpack4中把内置的webpack.DefinePlugin({'process.env':{NODE_ENV:JSON.stringify("development")}})去掉，添加了和entry平级的mode属性，来区分环境。
mode的value有none/development/production 这3中属性，若要在系统中使用，则用"process.env.NODE_ENV"变量来获取，比较奇葩。
（5）entry的路径原来的path.resolve(path.resolve(path.resolve(path.resolve(__dirname)),'src')，'app') 应替换为相对路径的'./src/App.jsx'。
（6）output的路径原来的
path.resolve(path.resolve(__dirname),"dist") 应替换为 path.join(path.join(__dirname),"dist")。
3. 最终的不同环境配置文件如下：
开发环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchao/dist';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    devtool: '#eval-source-map',
    stats: {
        children: true
    },
    mode:"development",
    entry:{
        app:APP_FILE
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

sit环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchaoSit/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

uat环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchaoUat/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

生产环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchao/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production') //定义编译环境
            }
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

4.升级后的package.json文件：

{
  "name": "hsc",
  "version": "1.0.0",
  "description": "hsc",
  "main": "index.html",
  "scripts": {
    "dev": "node server.js",
    "sit": "webpack --config webpack.config.sit.js --progress --colors --watch -p",
    "uat": "webpack --config webpack.config.uat.js --progress --colors --watch -p",
    "dist": "webpack --config webpack.config.dist.js --progress --colors --watch -p"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "author": "cheer",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router": "3.2.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "ajv": "^6.0.0",
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "clipboard": "^2.0.1",
    "css-loader": "^1.0.0",
    "express": "^4.16.3",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "isomorphic-fetch": "^2.2.1",
    "jsx-loader": "^0.13.2",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "postcss-loader": "^3.0.0",
    "promise-polyfill": "^8.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.2.0",
    "webpack-dev-server": "^3.1.7"
  },
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}